<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="from" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="技师名">
          <a-select
            v-model:value="from.coachId"
            show-search
            placeholder="请输入技师名"
            style="width: 200px"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            :options="datas"
            @search="handleSearch"
            @change="handleChange"
          ></a-select>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime" label="日期">
          <a-date-picker v-model="from.createTime" :valueFormat="'YYYY-MM-DD'" @change="startChange" />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluateType" label="服务评分">
          <a-rate v-model="from.evaluateType" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="skillEvaluateType" label="技术评分">
          <a-rate v-model="from.skillEvaluateType" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tagTree" label="评价等级">
          <div class="tagTreeBox">
            <div
              :class="from.tagTree.includes(item.title) ? 'tagItem' : 'tagItems'"
              v-for="(item, index) in evaluationList"
              :key="index"
              @click="ClicktagItem(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluate" label="评价内容">
          <a-textarea placeholder="请输入评价内容" v-model="from.evaluate" :auto-size="{ minRows: 6, maxRows: 6 }" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, xhdjOrderEvaluateQueryTagTreeList } from '@/api/manage'
import { xhdjCoachInfoList } from '@/api/manage.js'
import moment from 'moment'

export default {
  name: 'XhdjUserInfoModal',
  data () {
    return {
      title: '操作',
      visible: false,
      datas: [], //所有的技师
      value: '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      //   评论的数据
      from: {
        coachId: '', //技师的id
        evaluate: '', //评价的内容
        createTime: '', //创建日期
        evaluateType: 5, //评价类型 1-非常差 2-差 3-一般 4-满意 5-非常好
        skillEvaluateType:5,//技术评分 1-非常差 2-差 3-一般 4-满意 5-非常好
        tagTree: [] //标签树
      },
      evaluationList: [],

      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/xhdjOrderEvaluate/add',
        edit: '/order/xhdjOrderEvaluate/eidt'
      }
    }
  },
  created () {
    this.datas = []
    this.gettages()
    this.handleSearch()
  },
  methods: {
    // 技师数据
    async handleSearch (value) {
      this.datas = []
      console.log(value)
      const res = await xhdjCoachInfoList({
        coachName: value
      })
      if (res.code == 200) {
        res.result.records.forEach(item => {
          this.datas.push({
            label: item.coachName,
            value: item.id
          })
        })
      }
    },

    // 技师数据框
    handleChange (value) {
      this.from.coachId = value
    },

    // 选择时间
    startChange (value) {
      if (value) {
        this.from.createTime = value + ' 00:00:00'
      } else {
        this.from.createTime = value
      }
    },

    ClicktagItem (item) {
      if (this.from.tagTree.includes(item.title)) {
        this.from.tagTree = this.from.tagTree.filter(v => v !== item.title)
      } else {
        this.from.tagTree.push(item.title)
      }
    },

    async gettages () {
      const res = await xhdjOrderEvaluateQueryTagTreeList()
      console.log(res)
      if (res.code == 200) {
        this.evaluationList = res.result
        // this.from.tagTree = res.result
      }
    },

    add () {
      //初始化默认值
      this.edit({})
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close () {
      this.from = {
        coachId: '', //技师的id
        evaluate: '', //评价的内容
        createTime: '', //创建日期
        evaluateType: 5, //评价类型 1-非常差 2-差 3-一般 4-满意 5-非常好
        tagTree: [] //标签树
      }
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    handleOk () {
      if (!this.from.coachId) return this.$message.warning('请选择技师')
      if (!this.from.createTime) return this.$message.warning('请选择日期')
      if (!this.from.evaluate && this.from.tagTree.length === 0) return this.$message.warning('评价内容和标签至少有一个')

      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }

          var yxq = {
            coachId: this.from.coachId, //技师的id
            evaluate: this.from.evaluate, //评价的内容
            createTime: this.from.createTime, //创建日期
            evaluateType: this.from.evaluateType, //服务评分 1-非常差 2-差 3-一般 4-满意 5-非常好
            skillEvaluateType: this.from.skillEvaluateType, //技术评分 1-非常差 2-差 3-一般 4-满意 5-非常好
            tagTree: this.from.tagTree.join(',') //标签树
          }

          httpAction(httpurl, yxq, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.tagTreeBox {
  display: flex;
  //   border: 1px solid #000;
  .tagItem {
    margin-right: 10px;
    padding: 5px 15px;
    background-color: #1890ff;
    border-radius: 10px;
    color: #fff;
  }

  .tagItems {
    margin-right: 10px;
    padding: 5px 15px;
    background-color: #eee;
    border-radius: 10px;
    color: #000;
  }
}
</style>
